<template>
  <div id="app">
    <el-container style="height: 100%">
      <el-header :style="HeadColor">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <i class="el-icon-s-promotion"></i>
              <span class="one">思云课堂后台业务管理系统</span>
            </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <ul class="head-daohang">
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <i class="el-icon-switch-button" style="color: snow;fontSize: 20px"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>退出账号</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <i class="el-icon-menu" style="color: snow;fontSize: 20px"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <div style="height: 120px;width: 200px;">
                        <button style="background-color: #31C3A6;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color1"></button>
                        <button style="background-color: #409EFF;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color2"></button>
                        <button style="background-color: #E6A23C;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color3"></button>
                        <button style="background-color: #F56C6C;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color4"></button>
                        <button style="background-color: #909399;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color5"></button>
                        <button style="background-color: #957D9D;width: 50px;height: 50px;float: left;margin: 0px 0px 10px 10px" @click="color6"></button>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown class="xiangdui">
                    <span class="el-dropdown-link">
                       <el-badge :value="Tixing.zonghe" :max="99" class="juedui" v-if="TixingXianshi">
                      </el-badge>
                      <i class="el-icon-message-solid" style="color: snow;fontSize: 20px"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" v-if="TixingXianshi">
                      <div style="padding: 0px 20px 0px 20px;margin-bottom: 10px">
                        您有视频待审核，请尽快处理
                        (<span style="color: red">{{Tixing.shiping}}</span>)
                      </div>
                      <div style="padding: 0px 20px 0px 20px">
                        您有商品待审核，请尽快处理
                        (<span style="color: red">{{Tixing.shangping}}</span>)
                      </div>
                    </el-dropdown-menu>
                    <el-dropdown-menu slot="dropdown" v-else>
                      <div style="padding: 0px 20px 0px 20px;">
                        暂时没有要处理的审核
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <router-link to="/"><i class="el-icon-s-home" style="color: snow;fontSize: 20px"></i></router-link>
                </li>
                <li>
                  <el-dropdown v-if="denglustatus">
                      <div style="margin-top: 8px;">
                        <el-avatar :size="40" :src="user.img" style="float: left"></el-avatar>
                      </div>
                    <el-dropdown-menu slot="dropdown" class="box-card">
                      <div style="padding-left: 100px">你好,{{user.name}}</div>
                      <span style="float: left;padding: 0px 20px">账户信息</span>
                      <el-divider></el-divider>
                      <div style="padding: 0px 15px">所在部门：{{user.bmname}}</div>
                      <div style="padding: 0px 15px;">本次登录时间:{{local.time}}</div>
                      <div style="padding: 0px 15px;">登录地区:{{local.city}}</div>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-dropdown v-if="denglustatus == false">
                    <div style="margin-top: 8px;">
                      <el-avatar :size="40" :src="circleUrl" style="float: left"></el-avatar>
                      <el-dropdown-menu slot="dropdown" class="box-card">
                        <div style="padding: 5px 20px"><router-link to="">登录</router-link></div>
                      </el-dropdown-menu>
                    </div>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="130px" style="background-color: #545C64;">
          <el-col :span="24">
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" style="width: 100%;background-color: #545C64"  v-for="(item,index) in menu":key="index" router>
              <el-submenu index="" v-if="display >= item.siyunQuanxian">
                <template slot="title">
                  <i :class="item.siyunImg" style="color: snow" :index="item.siyunLujing">{{item.siyunName}}</i>
                </template>
                <div style="overflow-y: scroll;max-height: 700px;">
                <el-menu-item-group style="background-color: #545C64;" v-for="ite in item.children" :index="ite.siyunLujing" v-if="display >= ite.siyunQuanxian">
                  <span slot="title">{{ite.siyunName}}</span>
                  <el-menu-item :index="it.siyunLujing" v-for="it in ite.children" style="color: snow" v-if="display >= it.siyunQuanxian">{{it.siyunName}}</el-menu-item>
                </el-menu-item-group>
                </div>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main style="padding: 0px">
          <div><router-view v-if="isRouterAlive"></router-view></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import ShopDingdan from './components/SiyunDingdan/ShopDingdan'
  import CkDingdan from './components/SiyunDingdan/CkDingdan'
  import axios from 'axios'
  export default{
    components:{
      ShopDingdan
    },
    provide(){
      return {
        reload: this.reload
      }
    },
    data(){
      return{
        isRouterAlive:true,
        isCollapse: true,
        menu: "",
        display:1,
        local:{
          //ip所在城市
          city:'',
          time:'',//登录时间
        },
        denglustatus:true,//登录状态
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        user:{
          name:'',//登录用户名称
          bmname:'',//部门名称
          img:'',//头像
        },
        HeadColor:'background-color: #31C3A6',//头部导航栏的默认颜色
        Tixing:{
          shiping:'',//视频的审核个数
          shangping:'',//商品的个数
          zonghe:'',//总和
        },//提醒个数
        TixingXianshi:false,//是否展示提示的小红点
      }
    },
    methods:{
      async cli(){
        const {data:res} = await this.$http.post("http://localhost:8091/postGetDaohanglan")
        this.menu = res;
      },
      reload(){
        this.isRouterAlive=false
        this.$nextTick(()=>this.isRouterAlive=true)
      },
      getLocalCity(){
        var date = new Date();
        var dateTime=date.getTime()
        this.local.time = this.formatDate(dateTime);
        var data = {
          key: 'NOXBZ-HGGCG-6S7QA-IDBJF-SIMWV-XJBKQ', //申请的密钥,写死就行
        }
        var url = 'https://apis.map.qq.com/ws/location/v1/ip' //这个就是地理位置信息的接口
        data.output = 'jsonp'
        this.$jsonp(url,data).then((res) => {
          this.local.city = res.result.ad_info.city
          return res
        }).catch((error) => {
          console.log(error)
        })
      },
          formatDate(datetime) {
        var date = new Date(datetime)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var year = date.getFullYear()
        var month = ('0' + (date.getMonth() + 1)).slice(-2)
        var sdate = ('0' + date.getDate()).slice(-2)
        var hour = ('0' + date.getHours()).slice(-2)
        var minute = ('0' + date.getMinutes()).slice(-2)
        var second = ('0' + date.getSeconds()).slice(-2)
        // 拼接
        var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second
        // 返回
        return result
      },
      async denglu(){
        const {data:res} = await this.$http.post("/getHead",{
          "userId":1,
        })
        if (res != null){
          this.$store.commit('getUser',res);
          this.user.name = res.accountname;
          this.user.bmname = res.deptName;
          this.user.img = res.avatar;
        }
      },
      color1(){
        this.HeadColor = 'background-color: #31C3A6'
      },
      color2(){
        this.HeadColor = 'background-color: #409EFF'
      },
      color3(){
        this.HeadColor = 'background-color: #E6A23C'
      },
      color4(){
        this.HeadColor = 'background-color: #F56C6C'
      },
      color5(){
        this.HeadColor = 'background-color: #909399'
      },
      color6(){
        this.HeadColor = 'background-color: #957D9D'
      },
      async ShenheTixing(){
        const {data:res} = await this.$http.post("/getTixing")
        if (res!='' && res!=null){
          this.TixingXianshi = true;
          this.Tixing.zonghe = res.zonghe;
          this.Tixing.shiping = res.shiping;
          this.Tixing.shangping = res.shangping;
        }
      }
    },
    created() {
      this.cli();
      this.getLocalCity();
      this.denglu();
      this.ShenheTixing();
    }
  }
</script>

<style lang="less" scoped>
  *{
    margin:0px;
    pargin:0px;
  }
  .center{
    margin:0 auto;
  }
  ul li{
    list-style:none;
  }
  a{
    text-decoration:none;
  }
  #app{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .el-header{
    font:bold 18px "微软雅黑";
    color: white;
    line-height: 60px;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  .grid-content{
    width: 430px;
  }
  .head-daohang li{
    float: right;
    margin: 0px 15px 0px 15px;
  }
  .xiangdui{
    position: relative;
  }
  .juedui{
    position: absolute;
    top: -13px;
    left: 10px;
  }

</style>
